body {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
		background-color: #f0e0d0;
		font-family: Arial, sans-serif;
}
.container {
	display: flex;
	justify-content: flex-start;
}

.config-board {
	width: 300px;
	position: absolute;
	margin-right: 15px;
	left: 30px;
	top: 0;
}
.config-table {
	width: 100%;
}
.config-tr {
	width: 100%;
}
.config-td {
	width: 50%;
	text-align: left;
}
.config-td-value {
	width: 50%;
}
.config-td-value input {
	width: 85%;
	margin-top: 2px;
}
.config-td-value select {
	width: 92%;
	margin-top: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
}
.button-start {
	margin-top: 15px;
	padding: 10px 20px;
	font-size: 16px;
	background-color: #d42e12;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.button-start:hover {
	background-color: #b0260f;
}
.button-reset{
	margin-top: 15px;
	padding: 10px 20px;
	font-size: 16px;
	background-color: #ffaa7f;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	float: right;
	margin-right: 15px;
}
.button-reset:hover {
	background-color: #c48261;
}
.button-finish{
	padding: 10px 20px;
	font-size: 16px;
	background-color: darkorange;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.button-finish:hover {
	background-color: #c48261;
}
.button-introduce{
	padding: 10px 20px;
	font-size: 16px;
	background-color: mediumvioletred;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	float: right;
	margin-right: 15px;
}
.button-introduce:hover {
	background-color: palevioletred;
}
.panel-introduce-overlay {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
}
.panel-introduce-panel {
	width: 640px;
	height: 480px;
	background-color: #f0e0d0;
	border-radius: 8px;
	position: relative;
	box-sizing: border-box;
	overflow-y: auto;
	padding: 20px;
}
.panel-introduce-panel::-webkit-scrollbar {
	width: 8px; /* 滚动条宽度 */
}
.panel-introduce-panel::-webkit-scrollbar-track {
	background: #f1f1f1; /* 轨道背景 */
	border-radius: 4px;
}
.panel-introduce-panel::-webkit-scrollbar-thumb {
	background: #c1b1a1; /* 滑块颜色 */
	border-radius: 4px;
}
.panel-introduce-panel::-webkit-scrollbar-thumb:hover {
	background: #a19181; /* 滑块hover颜色 */
}
.panel-introduce-close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 24px;
	cursor: pointer;
	color: #666;
}
.panel-introduce-title {
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}
.chess-board {
	position: absolute;
	left: 400px;
	top: 0;
}
#chessboard {
		width: 560px;
		height: 640px;
		background-size: cover;
		margin: 20px auto;
		position: relative;
		border: 2px solid #8B4513;
}
.piece {
		position: absolute;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		text-align: center;
		line-height: 60px;
		font-weight: bold;
		cursor: pointer;
		user-select: none;
		box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.piece.selected {
    box-shadow: 0 0 0 3px #4CAF50, 0 2px 8px rgba(0,0,0,0.5);
    transform: scale(1.05);
    transition: all 0.2s ease;
}